<template>
  <div id="app">
    <canvas id="canvas" width="1000px" height="800px"></canvas>
  </div>
</template>

<script>
const Step = 2;
const Size = 10;

export default {
  data() {
    return {
      ctx: {},
      axis: {
        left: 0,
        top: 0,
      },
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    axisNew() {
      return JSON.parse(JSON.stringify(this.axis));
    },
  },
  methods: {
    init() {
      var c = document.getElementById("canvas");
      this.ctx = c.getContext("2d");
      this.drawImage();
      this.drawRect();
      this.eventListener();
    },
    drawImage() {
      var img = new Image();
      img.onload = () => {
        this.ctx.drawImage(img, 100, 100);
      };
      img.src = require("../public/static/maze.svg");
    },
    drawRect(axis) {
      let color = "#FF0000";
      let left = this.axis.left;
      let top = this.axis.top;
      if (axis) {
        color = "#FFFFFF";
        left = axis.left;
        top = axis.top;
      }
      this.ctx.fillStyle = color;
      this.ctx.fillRect(left, top, Size, Size);
    },
    getPixelColor(x, y) {
      var imageData = this.ctx.getImageData(x, y, 1, 1);
      var pixel = imageData.data;
      var r = pixel[0];
      var g = pixel[1];
      var b = pixel[2];
      var a = pixel[3] / 255;
      a = Math.round(a * 100) / 100;
      var rHex = r.toString(16);
      r < 16 && (rHex = "0" + rHex);
      var gHex = g.toString(16);
      g < 16 && (gHex = "0" + gHex);
      var bHex = b.toString(16);
      b < 16 && (bHex = "0" + bHex);
      var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
      var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
      var hexColor = "#" + rHex + gHex + bHex;
      return {
        rgba: rgbaColor,
        rgb: rgbColor,
        hex: hexColor,
        r: r,
        g: g,
        b: b,
        a: a,
      };
    },
    checkWall(left, top, type) {
      let arr = [];
      if (type == "x") {
        for (let index = left; index < left + Size; index++) {
          arr.push(this.getPixelColor(index, top).rgba === "rgba(0,0,0,1)");
        }
      } else {
        for (let index = top; index < top + Size; index++) {
          arr.push(this.getPixelColor(left, index).rgba === "rgba(0,0,0,1)");
        }
      }
      return arr.includes(true);
    },
    eventListener() {
      document.addEventListener("keydown", (e) => {
        switch (e.key) {
          case "ArrowUp":
            if (this.checkWall(this.axis.left, this.axis.top - Step, "x"))
              return;
            this.axis.top -= Step;
            break;
          case "ArrowLeft":
            if (this.checkWall(this.axis.left - Step, this.axis.top, "y"))
              return;
            this.axis.left -= Step;
            break;
          case "ArrowDown":
            if (
              this.checkWall(this.axis.left, this.axis.top + Size + Step, "x")
            )
              return;
            this.axis.top += Step;
            break;
          case "ArrowRight":
            if (
              this.checkWall(this.axis.left + Size + Step, this.axis.top, "y")
            )
              return;
            this.axis.left += Step;
            break;
        }
      });
    },
  },
  watch: {
    axisNew: {
      handler(val, oldVal) {
        this.drawRect(oldVal);
        this.drawRect();
      },
      deep: true,
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
